<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同行易</title>
    <style>
   .form-container {  
      display: flex;  
      flex-direction: column;  
      width: 100%;  
    }  
    .form-container form {  
      margin-bottom: 20px; 
    }  
        form {
            background-image: url("img/background.jpg");
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            max-width: 540px;
            height: 960px;
            background-color: rgba(187, 229, 241, 0.5);
            border: 1px solid #d3cbcb;
            margin: auto;
            color: rgb(6, 1, 12);
            border-radius: 6px;
            position: relative;
        }

        #footer{
          height:45px;
          width:540px;
          margin:auto;
            background-color:rgba(187, 229, 241, 0.5);
        }
        #left{
            width:30%;
            height:30px;
            margin:0 4%;
            padding: 5px 20px;
            float:left;
        }
        #center{
            width:30%;
            height:30px;
            margin:0 4%;
            padding: 5px 20px;
            float:left;
        }
        #right{
            width:30%;
            height:30px;
            margin:auto;
            padding: 5px 20px;
            clear:both;
        }
        #left:hover{
            cursor:pointer;
            background-color: rgb(194, 224, 224);
        }
        #center:hover{
            cursor:pointer;
            background-color: rgb(194, 224, 224);
        }
        #right:hover{
            cursor:pointer;
            background-color: rgb(194, 224, 224);
        }
    </style>

</head>
<body>
    <form action="" method="">
        <div class="form-container">  
             <form>  
              <label for="departure">出发地:</label>  
              <input type="text" id="departure" name="departure">  
                <br>
              <label for="destination">目的地:</label>  
              <input type="text" id="destination" name="destination">  
                <br>
              <label for="travelDate">出行时间:</label>  
              <input type="text" id="travelDate" name="travelDate">  
                <br>
              <label for="companions">同行人:</label>  
              <input type="number" id="companions" name="companions">  
                <br>
              <label for="notes">备注:</label>  
              <textarea id="notes" name="notes"></textarea>  
                <br>
              <input type="submit" value="保存">  
            </form>  
          </div> 
               
        <div id="footer" class="">
            <table width="100%" height="100%" align="center">
                <tr>
                    <td id="left"><a href="首页web.html">首页</a></td>
                    <td id="center"><a href="#">我的行程</a></td>
                    <td id="right"><a href="个人中心web.html">个人中心</a></td>
                </tr>
            </table>
        </div>
    </form>
</body>

</html>